<template>
  <div id="Home">
    <div class="background">
      <img class="img0 hidden-xs-only" src="@/assets/images/background-0.png" alt="">
      <img class="phoneImg" src="@/assets/images/phoneBg.jpg" alt="">
      <img class="img1 wow fadeInUp hidden-xs-only" src="/src/assets/images/background-1.png" alt="" />
      <img class="img2 wow fadeInUp hidden-xs-only" src="/src/assets/images/background-2.png" alt="" />
      <img class="img3 wow fadeInUp hidden-xs-only" src="/src/assets/images/background-3.png" alt="" />
    </div>
    <div class="content">
      <div class="logo wow fadeInUp">
        <img src="/src/assets/images/AXIE.png" alt="" />
      </div>
      <div class="btnCont wow fadeInUp">
        <div class="btn fs-14" @click="handleBtn">
          <span class="fs-18">{{ $t('ismsg.home.btnText') }}<i>300%</i></span>
          <img src="@/assets/images/playnow.png" alt="">
        </div>
      </div>
    </div>
  </div>
  <div id="Airdrop">
    <Airdrop />
  </div>
  <div class="woodBox">
    <div id="IDO">
      <IDO />
    </div>
    <div id="Pledge">
      <Pledge />
    </div>
    <div id="Economics">
      <Economics />
    </div>
    <div id="EcoMap">
      <EcoMap />
    </div>
  </div>

  <div id="RoadMap">
    <RoadMap />
  </div>
  <div class="starsBox">
    <img class="stars" src="@/assets/images/stars.png" alt="">
    <div id="HowToBuy">
      <HowToBuy />
    </div>
    <div id="About">
      <About />
    </div>
    <div class="introductionBox">
      <div class="introduction">
        <div class="Img wow bounceInDown">
          <img src="@/assets/images/logoAxie.png" alt="">
        </div>
        <div class="text wow bounceInRight fs-12">{{ $t('ismsg.introduction.text1') }}</div>
        <div class="text wow bounceInRight fs-12">{{ $t('ismsg.introduction.text2') }}</div>
        <div class="text wow bounceInRight fs-12">{{ $t('ismsg.introduction.text3') }}</div>
        <div class="btnGroup">
          <div class="btn"><a target="_blank" href="https://X.com">{{ $t('ismsg.introduction.btns[0]') }}</a></div>
          <div class="btn"><a target="_blank" href="https://btok360.com/AxieGameFi01">{{ $t('ismsg.introduction.btns[1]') }}</a></div>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script lang="ts" setup>
import About from '@/views/about.vue';
import EcoMap from '@/views/ecoMap.vue';
import Economics from '@/views/economics.vue';
import HowToBuy from '@/views/howToBuy.vue';
import IDO from '@/views/IDO.vue';
import Pledge from '@/views/pledge.vue';
import RoadMap from '@/views/roadMap.vue';
import Airdrop from './airdrop.vue';
const handleBtn = () => {
  window.location = '#Pledge';
}
</script>
<style lang="scss">
#IDO,
#Pledge,
#Airdrop,
#Economics {
  width: 100%;
  margin-bottom: 8vh;
}

#Home {
  width: 100%;
  position: relative;

  .background {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;

    .phoneImg {
      display: none;
      width: 100%;
      height: 100%;
    }

    img {
      width: 100%;
      height: 100%;
    }

    .img1 {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
    }

    .img2 {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 3;
    }

    .img3 {
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 4;
    }
  }

  .content {
    width: 100%;
    min-height: 92vh;
    position: relative;

    .logo {
      width: 100%;
      text-align: center;
      position: absolute;
      top: 20vh;
      left: 0;
      z-index: 5;

      img {
        width: 230px;
      }
    }

    .btnCont {
      position: absolute;
      left: 0;
      top: 50vh;
      z-index: 9;
      width: 100%;

      .btn {
        width: 489px;
        margin: 0 auto;
        position: relative;
        cursor: pointer;

        span {
          display: inline-block;
          width: 100%;
          color: #fff;
          font-family: MFBanHei_Noncommercial-Regular;
          font-size: 26px;
          position: absolute;
          left: 6%;
          top: 25%;
          z-index: 9;
        }

        i {
          font-size: 68px;
          vertical-align: sub;
        }

        img {
          width: 100%;
        }
      }
    }
  }

}

.woodBox {
  width: 100%;
  height: auto;
  background: url('@/assets/images/woodDark.jpg');
}

.starsBox {
  width: 100%;
  height: auto;
  position: relative;

  .stars {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
  }
}

.introductionBox {
  width: 100%;
  padding-bottom: 8vh;
  position: relative;
  z-index: 5;
  background: linear-gradient(rgb(7, 25, 75) 0%, rgb(33, 31, 61) 22.15%, rgb(44, 34, 56) 78%, rgb(90, 64, 55, 0.65) 100%);

  .introduction {
    width: 80%;
    margin: 0 auto;
    padding: 50px 10% 30px;
    background: url('@/assets/images/introduction.png') no-repeat left top;
    background-size: 100% 100%;

    .Img {
      width: 80%;
      max-width: 421px;
      margin: 0 auto 20px;

      img {
        width: 100%;
      }
    }

    .text {
      font-size: 18px;
      line-height: 26px;
      color: #5a4036;
      position: relative;

      &::before {
        content: "";
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #5a4036;
        position: absolute;
        top: 9px;
        left: -15px;
      }
    }

    .btnGroup {
      margin-top: 4vh;
      display: flex;
      justify-content: space-around;

      .btn {
        width: 135px;
        line-height: 36px;
        text-align: center;
        color: #5a4036;
        border: 2px dashed #554120;
        border-radius: 20px;
        font-size: 16px;
        font-family: MFBanHei_Noncommercial-Regular;
      }
    }
  }
}


@media screen and (max-width: 768px) {
  .phoneImg {
    display: block !important;
  }

  #Home .btn {
    width: 275px !important;

    span {
      top: 40% !important;

      i {
        font-size: 26px !important;
        vertical-align: baseline !important;
      }
    }
  }

  .introductionBox .introduction {
    width: 95%;
    padding: 30px 10%;
    background: url('@/assets/images/introductionPhone.png') no-repeat left top;
    background-size: 100% 100%;

    .text {
      line-height: 18px;
    }
  }
}

@media screen and (max-width:500px) {
  .fs-14 {
    font-size: 14px !important;
  }

  .fs-18 {
    font-size: 18px !important;
  }

  .fs-12 {
    font-size: 12px !important;
  }

  .fs-22 {
    font-size: 22px !important;
  }

  .fs-26 {
    font-size: 26px !important;
  }

  .fs-28 {
    font-size: 28px !important;
  }

  .fs-36 {
    font-size: 36px !important;
  }

  #IDO,
  #Pledge,
  #Airdrop,
  #Economics {
    margin-bottom: 5vh;
  }

  .introductionBox {
    padding-bottom: 5vh !important;

    .btnGroup {
      margin-top: 3vh !important;
      justify-content: space-between !important;

      .btn {
        width: 135px !important;
      }
    }
  }
}
</style>
  